<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{msg}}</p>
        <!-- 计算属性在容器直接作为当前vue实例的数据仓库变量进行使用 -->
        <p>info: {{ info }}</p>
        <input type="button" value="为info赋值" @click=" info='新info值' ">
        <p>info: {{ desc }}</p>
        <input type="button" value="为desc赋值" @click=" desc='新desc值' ">
        <!-- 页面逻辑简化 -->
        <p>pwd:{{ pwd }}</p>
        <div>
            <label for="pwd">密码:</label>
            <input type="text" id="pwd" v-model="pwd">
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input type="text" id="email" v-model="email">
        </div>
        <div>
            <!-- 页面存在过多的逻辑时，1、逻辑会组织不清 2、难于维护-->
            <input type="button" value="注册" :disabled=" pwd.length<6||pwd.length>10 ">
            <input type="button" value="注册" :disabled=" checkResult ">
        </div>
        <hr>
        <p>计算属性：{{ loadMsg }}</p>
        <p>计算属性：{{ loadMsg }}</p>
        <p>计算属性：{{ loadMsg }}</p>
        <p>普通方法：{{ getMsg() }}</p>
        <p>普通方法：{{ getMsg() }}</p>
        <p>普通方法：{{ getMsg() }}</p>
        <hr>
        <p v-for="(p, index) in products " :key="index">
            <input type="checkbox" v-model="p.state" >
            <span>{{ p.name }}-</span>
            <span>{{ p.count }}-</span>
            <span>{{ p.price }}-</span>
            <span>{{ p.price*p.count }}</span>
        </p>
        <p>选中数:{{getCount}};合计:{{getSum}}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"变量名",
            pwd:"",
            email:"",
            products: [
                { id: 10001, name: "小米手机", count: 1, price: 3200 ,state:false},
                { id: 10002, name: "华为电脑", count: 1, price: 6400 ,state:false},
                { id: 10003, name: "晨光铅笔*12", count: 1, price: 16 ,state:false},
                { id: 10004, name: "羽绒服", count: 1, price: 600 ,state:false}
            ]
        },
        computed: {
            info:function(){
                return "计算属性info";
            },
            desc:{
                get:function(){
                    return "计算属性desc";
                },
                set:function(newValue){
                    console.log(newValue);
                }
            },
            checkResult:function(){
                // 计算属性方法中 ，this 依然和方法仓库中的this 一样，指向于当前的vue实例
                if(this.pwd.length<6||this.pwd.length>10){
                    return true;
                }
                if(this.pwd.indexOf(".")!=-1){
                    return true;
                }
                if(this.email.length<=0){
                    return true;
                }
                return false;
            },
            loadMsg(){
               return this.msg + "-" + Math.random();
            },
            getCount(){
                let tempCount = 0;
                this.products.forEach((item) => {
                    if(item.state){
                        tempCount +=1;
                    }
                });
                return tempCount;
            },
            getSum(){
                let tempSum = 0;
                this.products.forEach((item) => {
                    if(item.state){
                        tempSum += item.price*item.count;
                    }
                });
                return tempSum;
            }
        },
        methods: {
            returnStr:function(){
                return "方法returnStr的返回值";
            },
            getMsg(){
                return this.msg + "-" + Math.random();
            }
        },
    })
</script>
</html>